<template>
  <div class="blog">
    <div class="container">
      <h3>{{title}}</h3>
      <input class="search" type="text" @keyup="search" placeholder="搜索" v-model="searchVal">
      <template v-if="label_blog.length">

      <ul class="all-blogs">
        <li v-for="item in label_blog" :key="item.id">
          <blog-list :id='item.id'
                     :summary="item.summary"
                     :date="item.create_time"
                     :title="item.title"
                     :picture="item.essay_picture"></blog-list>
        </li>
      </ul>
      <bottom-line></bottom-line>
      </template>
      <div class="content-null" v-else ><router-link to="/">暂时没有相关内容，您可以点击此处返回首页选择其他内容</router-link></div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import BlogList from 'base/blog-list'
import bottomLine from 'base/bottom-line'
export default{
  props: ['id', 'title'],
  data () {
    return {
      url: '/Essay/search_by_label/',
      label_blog: '',
      label_title: '',
      searchUrl: '/Essay/search_essay/',
      searchVal: '',
      blogList: ''
    }
  },
  mounted () {
    this.$http.get(this.domain + this.url + this.id + '/1/10').then(res => {
      this.blogList = res.data
      this.label_blog = this.blogList
    }, res => {
      this.$router.push({path: '/error'})
    })
  },
  methods: {
    search () {
      this.searchVal = this.searchVal.trim()
      if (this.searchVal) {
        this.$http.get(this.domain + this.searchUrl + this.searchVal).then(res => {
          if (res.data.length > 0) {
            this.label_blog = res.data
          } else {
            this.label_blog = this.blogList
            alert('不好意思😅，主人有点懒，还没有写出此文')
          }
        }, res => {
          this.$router.push({path: '/error'})
        })
      } else {
        this.label_blog = this.blogList
      }
    }
  },
  components: {
    BlogList,
    bottomLine
  }
}
</script>
<style scoped rel="stylesheet/stylus" lang="stylus">
.content-null{
  text-align: center
  padding: 20px 0 30px;
}
.content-null a{
  color: #000;
  font-size: 16px;
}
</style>
